
@import "../common/global";

@mixin radio-inner {
  z-index: 5;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #fff;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transition: transform .3s ease-in;
}

.bbq-radio {
  padding: 5px;
  font-size: 14px;
  .radio-area {
    border: 1px solid #dcdfe6;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    line-height: 1;
    background-color: #fff;
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    transition: all .3s;
    vertical-align: middle;

    &:hover {
      border: 1px solid $normalThemeColor;
    }
    &::after {
      @include radio-inner;
      transform: translate(-50%,-50%) scale(0);
    }
    &.is-checked {
      background: $normalThemeColor;
      border-color: $normalThemeColor;
      &::after {
        @include radio-inner;
        transform: translate(-50%,-50%) scale(1);
      }
    }
  }
  .title {
    line-height: 1;
    color: #606266;
    font-weight: 500;
    cursor: pointer;
    padding-left: 5px;
    vertical-align: middle;

  }
}